<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排行榜</title>
  <link rel="stylesheet" href="styles/icon.css">
  <link rel="stylesheet" href="styles/style.css">
</head>

<body>
  <div class="page">
    <header class="top">
      <div class="top-title">排行榜</div>
      <nav class="tabs">
        <ul>
          <li class="tab-item tab-active">
            <img src="imgs/icon_article.webp" class="tab-icon">好文精选
          </li>
          <li class="tab-item">
            <img src="imgs/icon_hot.webp"class="tab-icon">热门咨询
          </li>
        </ul>
      </nav>
      <nav class="cats">
        <ul class="cat-list">
          <li class="cat-item cat-active">文章</li>
        </ul>
      </nav>
    </header>

    <main class="list">
      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-1.jpg" alt="" class="cover-img">
          <img src="imgs/rank-top1.png" class="cover-rank" />
        </div>
        <div class="sku-title">维也纳歌星表演震惊全场</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">98</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>

      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-2.jpg" alt="" class="cover-img">
          <img src="imgs/rank-top2.png" class="cover-rank" />
        </div>
        <div class="sku-title">拉普拉斯研究出第一代平衡伞</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">55</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>

      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-3.jpg" alt="" class="cover-img">
          <img src="imgs/rank-top3.png" class="cover-rank" />
        </div>
        <div class="sku-title">基金会第二防卫学院为师长演唱校歌</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">55</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>

      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-4.jpg" alt="" class="cover-img">
          <img src="imgs/rank-top4.png" class="cover-rank" />
        </div>
        <div class="sku-title">科马拉监狱发生大火，囚犯们却在火中起舞</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">55</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>

      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-5.jpg" alt="" class="cover-img">
          <img src="imgs/rank-top5.png" class="cover-rank" />
        </div>
        <div class="sku-title">孩子们在暴雨里玩耍</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">55</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>

      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/sku-6.jpg" alt="" class="cover-img">
        </div>
        <div class="sku-title">多次发表惊世理论的数学家竟然才16岁？！</div>
        <div class="desc">
          <i class="iconfont icon-comment"></i>
          <span class="desc-number">55</span>
          <i class="iconfont icon-thumb-up"></i>
          <span class="desc-number">23</span>
        </div>
      </a>


    </main>
  </div>
</body>

</html>